<template>
  <div class="list">
    <layout>
      <template #top>
        <search></search>
      </template>
      <template #left>
        <div class="options_list">
          <template v-for="item in listStore.userOptions" :key="item.id">
            <option-item
              :bgc="item.bgc"
              :icon="item.icon"
              :path="item.path"
              :title="item.title"
              :tip-num="
                item.path === '/user/newFriend'
                  ? optionStore.newFriendApplyNum
                  : 0
              "
              @click="optionsHandle(item)"
            ></option-item>
            <div v-if="item.list && item.list.length > 0">
              <template v-for="item1 in item.list" :key="item1.id">
                <div v-if="item1.group">
                  <div
                    class="options"
                    :class="{ active: route.query.id == item1.id }"
                    @click="gotoChat(item1)"
                  >
                    <el-avatar :size="40" shape="square" :src="item1.avatar" />
                    <div class="options_info">
                      <span class="title">{{ item1.name }} </span>
                      <span class="sub_title">{{ item1.username }} </span>
                    </div>
                  </div>
                </div>
                <div v-else>
                  <div
                    class="options"
                    :class="{ active: route.query.id == item1.user_id }"
                    @click="gotoChat(item1)"
                  >
                    <el-avatar :size="40" shape="square" :src="item1.avatar" />
                    <div class="options_info">
                      <span class="title">{{ item1.nickname }} </span>
                      <span class="sub_title">{{ item1.username }} </span>
                    </div>
                  </div>
                </div>
              </template>
            </div>
            <div v-if="item.list && item.list.length === 0" class="empty_list">
              <span>-- 暂时为空 --</span>
            </div>
          </template>
        </div>
      </template>
      <template #right>
        <router-view></router-view>
      </template>
    </layout>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

import layout from '@renderer/components/layout.vue'
import search from '@renderer/components/search.vue'
import optionItem from '@renderer/components/option-item.vue'

import useList from '@renderer/pinai/modules/list'
import useOptions from '@renderer/pinai/modules/options'
import useChat from '@renderer/pinai/modules/chat'

const listStore = useList()
const optionStore = useOptions()
const chatStore = useChat()
const router = useRouter()
const route = useRoute()

onMounted(() => {
  listStore.getFriendList() // 获得好友列表
  listStore.getGroupList() // 获得群组列表
})

// 点击选项
const optionsHandle = (item: any) => {
  if (item.path) {
    item.path === '/user/addFriend'
      ? router.push('/user/search')
      : router.push(item.path)
  }
}

// 点击好友或群组去往聊天页面
const gotoChat = (item: any) => {
  if (item.group) {
    chatStore.setCurrentSessionId(item.id)
  } else {
    chatStore.setCurrentSessionId(item.user_id)
  }
  router.push({
    path: '/chat',
    query: {
      id: item.group ? item.id : item.user_id,
      type: item.group ? 'group' : 'user',
      group_user_id: item.group ? item.user_id : '',
      friend_id: item.id,
      name: item.nickname || item.username,
      g_name: item.name,
      avatar: item.avatar
    }
  })
}
</script>

<style lang="scss" scoped>
.list {
  .options_list {
    .options {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      /* margin-bottom: 20px; */
      padding: 0px 10px;
      box-sizing: border-box;
      border-bottom: 1px solid #e5e5e5;
      /* background-color: red; */

      &:hover {
        background-color: #c8c7c6;
      }
      .el-avatar {
        flex-shrink: 0;
      }
      .options_info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        .title {
          width: 140px;
          font-size: 15px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-left: 15px;
        }
        .sub_title {
          width: 140px;
          font-size: 14px;
          color: #b3b3b3;
          margin-left: 15px;
          line-height: 1.5;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    .active {
      background-color: #c8c7c6;
    }

    .empty_list {
      height: 60px;
      font-size: 14px;
      color: #b3b3b3;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
